<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form ref="searchForm" class="el-form-col search-form" :model="search">
          <el-row :gutter="15">
            <el-col :lg="4" :md="6">
              <el-form-item prop="loadingCode">
                <el-input v-model="search.loadingCode" placeholder="中转装车单号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="workerName">
                <el-input v-model="search.workerName" placeholder="司机" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="plateNumber">
                <el-input v-model="search.plateNumber" placeholder="车牌号" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item prop="foundName">
                <el-input v-model="search.foundName" placeholder="调度人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="4" :md="6">
              <el-form-item>
                <el-row class="search-btns" :gutter="5">
                  <el-col :span="12">
                    <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
                  </el-col>
                  <el-col :span="12">
                    <el-button @click="resetFields('searchForm')" plain>重置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="show">
        <el-row>
          <el-col :span="6">
            <p>
              <el-date-picker
                :clearable="false"
                type="date"
                :editable="false"
                format="yyyy-MM-dd"
                placeholder="更改日期"
                @change="timeChange"
                v-model="search.time" style="margin-top: -10px"
              ></el-date-picker>
            </p>
          </el-col>
          <el-col :span="6">
            <p>装车单：<span>{{totalItem}}</span>单</p>
          </el-col>
          <el-col :span="12">
            <el-button type="primary pull-right" size="small" @click="showPrintModal()">批量打印</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <el-col :span="24">
      <!--url="/ms-warehouse-order/loading-order/get-loading-order-list-PS"-->
      <BasicTable
        ref="BasicTable"
        url="/ms-terminal-order/loading-order/get-loading-order-list-ez"
        :tabs="tabs"
        :initParams="{time: search.time}"
        :columns="columns">
        <template slot="column">
          <el-table-column fixed="right" width="100px" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="showPrintModal(scope.row)"
              >
                打印
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
    <Print-modal ref="PrintModal" :idArr="idArr" titleName="干线装车单"></Print-modal>
  </el-row>
</template>
<script>
import {copy, confirm} from '@/utils'
import moment from 'moment'
import {unixTimestampFilter} from '@/filters'
import PrintModal from '@/views/oms/print/distribution/PrintModal'
// import {copy, dotData, confirm} from '@/utils'
export default {
  name: 'printTransferIndex',
  components: {
    PrintModal
  },
  data() {
    return {
      isOpen: false,
      visible: false,
      searchLoading: false,
      search: {
        time: moment().format('YYYY-MM-DD'), // 默认当前时间
        loadingCode: '',
        workerName: '',
        plateNumber: '',
        foundName: ''
      },
      totalItem: 0,
      tabs: [],
      idArr: [],
      columns: [
        {
          label: '干线单号',
          data: 'loadingCode'
        },
        {
          label: '司机',
          data: 'workerName'
        },
        {
          label: '车牌号',
          data: 'plateNumber'
        },
        {
          label: '总单数(单)',
          data: 'totalOrderNum'
        },
        {
          label: '总包件(件)',
          data: 'totalPackage'
        },
        {
          label: '总体积(m³)',
          data: 'totalVolume'
        },
        {
          label: '调度人',
          data: 'foundName'
        },
        {
          label: '调度时间',
          data: 'foundtime',
          render: (data, full) => {
            return unixTimestampFilter(data, 'HH:mm')
          }
        },
        {
          label: '打印次数',
          data: 'printNum'
        }
      ]
    }
  },
  created() {
    this.getHeadData()
  },
  // watch: {
  //   'search.time'(val, oldVal) {
  //     if (isEqual(val, oldVal)) {
  //       return
  //     }
  //     console.log('val', val)
  //     this.$refs.BasicTable.search(this.search)
  //   }
  // },
  methods: {
    getHeadData() {
      this.$ajax.get('/ms-terminal-order/loading-order/get-loading-order-list-ez-num', {time: this.search.time ? this.search.time : moment().format('YYYY-MM-DD')}).then(response => {
        if (response.success) {
          this.totalItem = response.data.LoadingOrderNum || 0
        }
      })
    },
    unixTimestampFilter,
    timeChange(val) {
      this.search.time = moment(val).format('YYYY-MM-DD')
      setTimeout(_ => {
        this.$refs.BasicTable.search(this.search)
        this.getHeadData()
      }, 50)
    },
    // 搜索
    searchFunc(search) {
      console.log('this.search.time', this.search.time)
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    showPrintModal(data) {
      this.idArr = []
      if (data) {
        this.idArr.push(data.loadingCode)
      } else {
        let selectedArr = this.$refs.BasicTable.getSelected()
        selectedArr.forEach(item => {
          this.idArr.push(item.loadingCode)
        })
      }
      if (!this.idArr.length) {
        this.$message({
          type: 'warning',
          message: '请选择要打印的订单'
        })
      } else {
        if (this.idArr.length > 1) {
          confirm(`<p>是否将选择的<span class="font-red" style="font-size:18px;"> ${this.idArr.length}</span>单进行打印</p>`, '批量打印', {
            type: 'warning',
            center: true,
            dangerouslyUseHTMLString: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            showCancelButton: false,
            closeOnClickModal: false
          }).then(_ => {
            this.$refs.PrintModal.show()
          })
        } else {
          this.$refs.PrintModal.show()
        }
      }
    }
  }
}
</script>
